<script setup lang="ts">
import { useEcharts } from '@/hooks/useEcharts';
import { reactive , computed } from 'vue';
interface Series {
    typeName: string;
    list: number[];
}
const props = withDefaults( defineProps<{
    width?: string,
    height?: string,
    theme?: string,
    bgColor?: string,
    title: string,
    subtitle?: string,
    data: Series[],
    xAxisData: string[],
}>(),{
    width: '100%',
    height: '380px',
    data: () => [],
});

const legendData = computed(() => props.data.map(item => item.typeName));
const series = computed(() => props.data.map(item => ({
    name: item.typeName,
    data: item.list,
    type: 'line',
    //stack: 'Total',
})));

const option = reactive({
    backgroundColor: props.bgColor,
    title: {
        text: props.title,
        subtext: props.subtitle,
        left: 'left',
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: legendData,
        right: '50px',
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
        saveAsImage: {
            title: '下载为图片'
        }
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: computed(() => props.xAxisData)
    },
    yAxis: {
        type: 'value'
    },
    series:series,
});
const { chartRef }  = useEcharts({props, option});

</script>

<template>
    <el-card shadow="hover">
        <div ref="chartRef" :style="{width: props.width, height: props.height}">

        </div>
    </el-card>
</template>

<style scoped>

</style>